<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本</title>
  <script src="../lib/three.min.js"></script>
</head>

<body>
  <div>
    <canvas id="c"></canvas>
  </div>
</body>
<script type="module">
  import * as THREE from 'three'

  function camera() {
    const fov = 75; // 视野范围(field of view)
    const aspect = 2; // 画布宽高比，相机默认情况下300*150，所以300/150或者说2
    const near = 0.2; // 相机近平面
    const far = 5; // 相机远平面
    // 这四个参数定义了一个 "视椎(frustum)"。 视椎(frustum)是指一个像被削去顶部的金字塔形状。
    return new THREE.PerspectiveCamera(fav, near, far)
  }

  function main() {
    const canvas = docuemnt.getElementById('#c')
    const renderer = new THREE.WebGLRenderer({ antialias: true, canvas })
  }
</script>

</html>